<script setup>
import temblorCanteen from "@/api/temblor/temblorCanteen.js";
import {onBeforeUnmount, onMounted, reactive} from "vue";
import {Message} from "@arco-design/web-vue";

const paginate = reactive({
  page: 1,
  total: 1,
  limit: 10,
  list: []
})
const getList = async () => {
  const res = await temblorCanteen.getList({
    page: paginate.page,
    limit: paginate.limit
  })
  if (res.success) {
    paginate.list = res.data.list
    paginate.total = res.data.total
    paginate.page = res.data.page
    paginate.limit = res.data.limit
  } else {
    paginate.list = []
  }

}
let timer = null;
onBeforeUnmount(() => {
  clearInterval(timer)
})
onMounted(() => {
  getList()
})
timer = setInterval(() => {
  getList()
}, 5000)
const column = [
  {
    title: '姓名',
    dataIndex: 'user.username',
  },
  {
    title: '吃饭时间',
    dataIndex: 'eat_time'
  },
  {
    title: '吃饭类型',
    dataIndex: 'eat_type'
  }
]
const changePage = (page) => {
  paginate.page = page;
  getList()
}
</script>

<template>
  <a-card>
    <a-table :data="paginate.list" :columns="column"></a-table>
    <a-pagination :current="paginate.page" :page-size="paginate.limit" :total="paginate.total"
                  @change="changePage"
    ></a-pagination>
  </a-card>
</template>

<style scoped>

</style>